$accordion-subtitle-height: 16px;
$accordion-background-collapsed: var( --color-surface ); // same as body
$accordion-background-expanded: var( --color-surface );

.accordion {
	box-shadow: 0 -1px 0 var( --color-neutral-5 ), 0 1px 0 var( --color-neutral-5 );
	margin-top: 1px;
	position: relative;
}

.accordion__header {
	position: relative;
}

.accordion__toggle {
	display: block;
	width: 100%;
	cursor: pointer;
	margin: 0;
	padding: $accordion-padding;
	padding-right: ( $accordion-padding + 22px );
	color: var( --color-neutral-70 );
	background-color: var( --color-surface );
	text-align: left;
	transition: all 150ms ease-in;

	&:hover {
		background-color: var( --color-neutral-0 );

		.accordion__title {
			color: var( --color-accent );
		}

		.accordion__arrow {
			color: var( --color-accent );
		}
	}

	.accordion__arrow {
		position: absolute;
		top: 50%;
		right: ( $accordion-padding - 4px );
		transform: translateY( -50% );
		color: var( --color-neutral-40 );
		height: 24px;
		.gridicon {
			transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), color 0.2s ease-in;
		}
	}

	.accordion.has-subtitle & {
		padding-top: ( $accordion-padding - $accordion-subtitle-height / 2 );
		padding-bottom: ( $accordion-padding - $accordion-subtitle-height / 2 );
	}
}

.accordion.is-expanded {
	.accordion__toggle {
		background-color: var( --color-surface );

		.accordion__arrow {
			.gridicon {
				transform: rotate( 180deg );
			}
		}
	}

	.accordion__content {
		overflow: visible;
	}
}

.accordion__icon {
	position: absolute;
	left: $accordion-padding;
	top: 50%;
	transform: translateY( -50% );
	margin-top: 3px;

	.gridicon {
		width: 20px;
		height: 20px;
	}
}

.accordion__title,
.accordion__subtitle {
	display: block;
	font-size: $font-body-small;
	font-weight: 600;
	line-height: $accordion-subtitle-height;
	transition: all 150ms ease-in;

	.accordion.has-icon & {
		padding-left: 28px;
	}

	.accordion.has-status & {
		padding-right: 28px;
	}
}

.accordion__subtitle {
	font-size: $font-body-extra-small;
	color: var( --color-text-subtle );
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	height: $accordion-subtitle-height;
}

.accordion:not( .is-expanded ) .accordion__toggle .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: var( --color-surface-rgb ) );
	}
}

.accordion:not( .is-expanded ) .accordion__toggle:hover .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: var( --color-neutral-0-rgb ) );
	}
}

.accordion.is-expanded .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: var( --color-surface-rgb ) );
	}
}

.accordion__content {
	overflow: hidden;
	height: 0;
	background-color: var( --color-surface );
}

.accordion.is-expanded .accordion__content {
	height: auto;
}

.accordion__content-wrap {
	padding: 0 $accordion-padding $accordion-padding $accordion-padding;
}

.accordion__section {
	margin-bottom: 24px;
}

.accordion__section:last-child {
	margin-bottom: 0;
}

.accordion__status {
	position: absolute;
	right: ( $accordion-padding + 20px + 4px );
	top: 50%;
	transform: translateY( -50% );
	padding: 4px;

	&::before {
		content: '';
		position: absolute;
		top: 4px;
		left: 4px;
		width: 14px;
		height: 14px;
		background-color: var( --color-surface );
		border-radius: 50%;
	}

	.gridicon {
		position: relative;
		display: block;
		width: 18px;
		height: 18px;
		margin: -2px;
	}

	&.is-warning {
		color: var( --color-warning-40 );
	}

	&.is-error {
		color: var( --color-error-40 );
	}

	&.is-info {
		color: var( --color-neutral-40 );
	}
}
